<div class="component-menu-window" *ngIf="isOpen; else closedWindow">
    <div class="top">
        <input #searchBar (input)="search(searchBar.value)" type="text" autocomplete="off" spellcheck="false" class="search" placeholder="search"/>
        <span (click)="toggleWindow()" class="window-close">
            <i class="fas fa-minus"></i>
        </span>
    </div>
    <div class="main">
        <div class="section" *ngFor="let category of categories" [class.active]="category.isOpen">
            <div class="header" (click)="category.isOpen = !category.isOpen">
                <span class="title">{{ category.title }}</span>
                <span class="icon" *ngIf="category.isOpen; else closed">
                    <i class="fas fa-caret-up"></i>
                </span>
                <ng-template #closed>
                    <span class="icon">
                        <i class="fas fa-caret-down"></i>
                    </span>
                </ng-template>
            </div>
            <div class="content">
                <div [style.backgroundColor]="item.color" class="section-item" *ngFor="let item of category.items"
                (mousedown)="dragItem(item)" (delayed-hover)="hoverItem(item)" delay="300" (mouseout)="leaveItem()"
                (touchstart)="dragItem(item)">
                    <span class="caption">{{ item.mark }}</span>
                    <img src="{{ item.imageUrl }}">
                    <button *ngIf="!viewingService.isHelpersDisabled()" class="info" (click)="showInfo(item)"><i class="far fa-question-circle"></i></button>
                </div>
                <div class="section-item fill">
                </div>
                <div class="section-item fill">
                </div>
                <div class="section-item fill">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="item-description" *ngIf="currentItem != null" [style.backgroundColor]="currentItem.color">
    <span>{{ currentItem.caption }}</span>
    <hr>
    <img src="{{ currentItem.imageUrl }}">
</div>
<div #placingItemRef class="section-item placing-item" *ngIf="placingItem != null" [style.backgroundColor]="placingItem.color">
    <img src="{{ placingItem.imageUrl }}">
</div>
<ng-template #closedWindow>
    <div class="arrow-open" (click)="toggleWindow()">
        <i class="fas fa-chevron-right"></i>
    </div>
</ng-template>
<div class="component-info-window" *ngIf="isInfoOpen">
    <span class="component-info-title">{{currentInfoComponent.caption}}</span>
    <div class="component-info-icon">
        <img src="{{currentInfoComponent.imageUrl}}">
    </div>
    <div [innerHtml]="currentInfoComponent.info"></div>
    <button class="close" (click)="closeInfo()"><i class="fas fa-times"></i></button>
</div>